<template>
  <div class="big-box">
    <van-nav-bar
      title="购物车"
      left-arrow
      style="height: 0.6rem"
      @click-left="onClickLeft"
    >
      <template #right>
        <van-icon name="delete-o" size="20" @click="onClearCart" />
      </template>
    </van-nav-bar>

    <!--  购物车为空时显示的  -->
    <div v-if="shopCart.length == 0">
      <van-empty description="你好！你的购物车还没有商品">
        <van-button
          type="primary"
          class="bottom-button"
          size="mini"
          @click="onGoShop"
          >去逛逛</van-button
        >
      </van-empty>
    </div>
    <!-- 购物车不为空时显示 -->
    <div v-else class="cart-every" v-for="item in shopCart" :key="item.cartid">
      <van-checkbox
        v-model="item.flag"
        @click="updateStatus(item)"
      ></van-checkbox>
      <van-card
        :num="item.num"
        :price="item.originprice + '.00'"
        :title="item.proname"
        :thumb="item.img1"
      >
        <template #footer>
          <!-- <van-button size="mini">按钮</van-button>
          <van-button size="mini">按钮</van-button> -->
          <van-stepper v-model="item.num" @change="updateNum(item)" :step="1" />
          <van-icon
            name="cross"
            class="backspace-one"
            @click="deleteCart(item)"
          />
        </template>
      </van-card>
      <van-submit-bar
        :price="sumPrice"
        button-text="提交订单"
        @submit="onSubmit"
      >
        <van-checkbox v-model="isCheckAll" @click="checkAllChange">
          全选
        </van-checkbox>
      </van-submit-bar>
    </div>
  </div>
  <MyFooter></MyFooter>
</template>

<script>
import MyFooter from "@/components/MyFooter.vue";
import { showToast, showConfirmDialog } from "vant";
import {
  goodsAddShopCartApi,
  getShopCartApi,
  updateNumApi,
  deleteCartApi,
  clearCartApi,
  updateCartStatusAllApi,
  updateCartStatusApi,
} from "@/api/cart.js";
export default {
  data() {
    return {
      isShow: true,
      shopCart: [],
      isCheckAll: false,
      // checked: true,
    };
  },
  components: {
    MyFooter,
  },

  created() {
    this.getShopCart();
  },
  computed: {
    // 求和：所有物品的总价
    sumPrice: function () {
      return this.shopCart.reduce(
        (sum, item) =>
          sum + (item.flag === true ? item.originprice * item.num : 0) * 100,
        0
      );
    },
  },

  methods: {
    // 点击提交按钮
    onSubmit() {
      console.log("提交订单");
    },
    // 点击跳转到首页，去购物
    onGoShop() {
      this.$router.push("/Home");
    },
    onClickLeft() {
      this.$router.go(-1);
      // this.$router.push()
    },
    // 调用修改全选状态
    checkAllChange() {
      this.updateCartStatusAll();
    },
    // 调用修改单个状态
    updateStatus(item) {
      this.updateCartStatus(item);
    },
    // 清空购物车
    onClearCart() {
      showConfirmDialog({
        title: "嗨购App",
        message: "你好！是否清空购物车所有商品？",
      })
        .then(() => {
          this.clearCart();
        })
        .catch(() => {
          // on cancel
        });
    },
    // 获取购物车数据
    async getShopCart() {
      let res = await getShopCartApi({
        userid: sessionStorage.getItem("userid"),
      });
      if (res.data.code === "200") {
        console.log("购物车数据res", res.data.data);
        this.shopCart = res.data.data;
      } else {
        this.shopCart.length = 0;
      }
    },
    // 修改购物车物品数量
    async updateNum(item) {
      let res = await updateNumApi({
        cartid: item.cartid,
        num: item.num,
      });
      if (res.data.code === "200") {
        showToast("修改成功！");
      } else {
        showToast("修改失败！");
      }
    },
    // 删除购物车单个物品
    async deleteCart(item) {
      let res = await deleteCartApi({
        cartid: item.cartid,
      });
      if (res.data.code === "200") {
        const index = this.shopCart.findIndex(
          (val) => val.cartid === item.cartid
        );
        this.shopCart.splice(index, 1);
        showToast("删除成功！");
      }
    },
    // 清空购物车
    async clearCart() {
      let res = await clearCartApi({
        userid: sessionStorage.getItem("userid"),
      });
      if (res.data.code === "200") {
        this.shopCart.length = 0;
        showToast("清空成功！");
      }
    },
    // 更新购物车所有商品的选中状态
    async updateCartStatusAll() {
      let res = await updateCartStatusAllApi({
        userid: sessionStorage.getItem("userid"),
        type: this.isCheckAll,
      });
      if (res.data.code === "200") {
        this.shopCart.forEach((item) => (item.flag = this.isCheckAll));
        // this.isCheckAll = this.shopCart.some((item) => item.flag === true);
      }
    },
    // 更新购物车单个商品的选中状态
    async updateCartStatus(item) {
      let res = await updateCartStatusApi({
        cartid: item.cartid,
        flag: item.flag,
      });
      if (res.data.code === "200") {
        this.isCheckAll = this.shopCart.every((item) => item.flag === true);
      }
    },
  },
};
</script>

<style scoped>
.big-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.van-submit-bar {
  bottom: 0.5rem;
}

.cart-every {
  /* width: 100%; */
  display: flex;
  /* background-color: yellowgreen; */
  min-height: 1rem;
  /* z-index: 999; */
  /* overflow: scroll; */
  /* margin-bottom: 2rem; */
}

.van-card {
  width: 100%;
  flex: 1;
}

.bottom-box {
  height: 1rem;
}

.backspace-one {
  position: absolute;
  top: 0.05rem;
  right: 0.05rem;
}

</style>
